import { reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { LoginFormType } from '@/types/user'

export const useLoginEffect = () => {
  const router = useRouter()
  const store = useUserStore()
  const loading = ref(false)

  const form = reactive<LoginFormType>({
    // phone: '13261699297',
    // code: '1234',
    phone: '',
    code: ''
  })

  const handleSubmit = async (values: LoginFormType) => {
    loading.value = true
    const payload = {
      phone: values.phone,
      code: values.code
    }
    store.login(payload).then(() => {
      loading.value = false
      router.push({ path: '/home' })
    })
    .catch(() => {
      loading.value = false
    })
  }
  return {
    ...toRefs(form),
    loading,
    handleSubmit 
  }
}
